<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-05-13 09:46:50
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-24 11:46:37
-->
<template>
  <div>
    <el-dialog
      title="新建优惠券"
      :visible.sync="dialog.couponShow"
      width="50%"
      custom-class="couponClass"
      @close="couponClose"
    >
      <el-form
        :model="couponForm"
        ref="couponForm"
        :rules="couponRules"
        label-position="top"
      >
        <el-form-item label="优惠券名称" prop="name">
          <el-input
            v-model="couponForm.name"
            placeholder="请输入优惠券名称"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠券类型" prop="type">
          <el-radio-group v-model="couponForm.type" @change="typeChange">
            <el-radio label="1">满减优惠券</el-radio>
            <el-radio label="2">折扣优惠券</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="优惠金额"
          v-if="couponForm.type == 1"
          prop="coupon"
        >
          <el-input
            v-model="couponForm.coupon"
            placeholder="请输入优惠金额"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="折扣优惠"
          v-if="couponForm.type == 2"
          prop="coupon"
        >
          <el-input-number
            v-model="couponForm.coupon"
            :min="1"
            :max="10"
            label="请输入折扣"
            style="margin-right: 10px"
          ></el-input-number>
          折
        </el-form-item>
        <el-form-item label="使用条件" prop="threshold">
          <el-radio-group v-model="couponForm.threshold">
            <el-radio :label="false">无门槛</el-radio>
            <el-radio :label="true">满额使用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="满减优惠"
          v-if="couponForm.threshold"
          prop="fullAmount"
        >
          满
          <el-input
            v-model="couponForm.fullAmount"
            placeholder="请输入价格"
            style="width: 200px; margin: 0 10px"
          ></el-input>
          元可用
        </el-form-item>
        <el-form-item label="发行量" prop="num">
          <el-input
            v-model="couponForm.num"
            type="number"
            placeholder="请输入发行数量"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="生效时间" prop="time">
          <el-date-picker
            v-model="couponForm.startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开始时间"
          >
          </el-date-picker>
          至
          <el-date-picker
            v-model="couponForm.finishTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="适用场景" prop="batchType">
          <el-radio-group v-model="couponForm.batchType">
            <el-radio label="1">全部考试</el-radio>
            <el-radio label="2">指定考试</el-radio>
            <el-radio label="3">指定考试不可用</el-radio>
          </el-radio-group>
          <div v-if="couponForm.batchType != 1">
            <span class="addCoupon" @click="addCoupon">+ 添加优惠券</span>
            <el-table :data="batchData" style="width: 500px" height="200px">
              <el-table-column label="批次名称" prop="batchName">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <span style="color: #1267fa" @click="batchDel(scope.row)">
                    删除
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <div class="basics">审核信息</div>
        <el-form-item label="审核人" prop="auditUserIds">
          <div class="approve">
            <template v-for="(item, index) in examineList">
              <div :key="index" class="examine">
                <div class="examine-qd">
                  <div class="circle-img">
                    <el-tooltip
                      :content="item.nickName"
                      placement="top"
                      effect="dark"
                    >
                      <img :src="item.avatar" alt="" />
                    </el-tooltip>
                  </div>
                  <div>{{ item.nickName }}</div>
                  <div class="circle-series">第{{ index + 1 }}级</div>
                </div>
              </div>
            </template>
            <div class="examine">
              <div class="examine-qd">
                <div class="circle" @click="onAdd">
                  <i class="el-icon-plus circleIcon"></i>
                </div>
                <div>选择人员</div>
                <div class="circle-series">
                  第{{ examineList.length + 1 }}级
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialog.couponShow = false">取消</el-button>
        <el-button type="primary" @click="submit">提交审核</el-button>
      </span>
    </el-dialog>
    <div v-if="dialog.batchShowEject">
      <el-dialog title="考试列表" :visible.sync="dialog.batchShow" width="50%">
        <div class="table">
          <el-table
            :data="Data"
            style="width: 100%"
            ref="multipleTable"
            @selection-change="dataChange"
          >
            <el-table-column type="selection"> </el-table-column>
            <template v-for="(item, index) in switchShow">
              <el-table-column
                :key="index"
                :label="item.label"
                :prop="item.stage"
                :show-overflow-tooltip="true"
                :width="item.width"
              >
              </el-table-column>
            </template>
          </el-table>
        </div>
        <!-- 分页器 -->
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          layout=" ->,total, sizes, prev, pager, next, jumper "
          :total="total"
        >
        </el-pagination>
        <span slot="footer">
          <el-button @click="dialog.batchShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </span>
      </el-dialog>
    </div>
    <el-dialog title="审核人" :visible.sync="dialog.examineShow" width="30%">
      <el-table :data="examineData" @selection-change="handleSelectionChange">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="nickName" label="审核人名称"> </el-table-column>
      </el-table>

      <span slot="footer">
        <el-button @click="dialog.examineShow = false">取消</el-button>
        <el-button type="primary" @click="examineSubmit" :disabled="disabled"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { shelfList, couponEdit } from "@/api/order/coupon";
import { getNoRepeatPersonLiable } from "@/api/CRM/comtact";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  watch: {
    "couponForm.batchType": {
      deep: true,
      handler(val) {
        this.batchData = [];
        this.handleSelection = [];
      },
    },
  },
  data() {
    const validateExamine = (rule, value, callback) => {
      if (this.couponForm.auditUserIds.length == 0) {
        callback(new Error("请选择审核人"));
      } else {
        callback();
      }
    };
    const batchVlid = (rule, value, callback) => {
      if (this.couponForm.batchType == 1) {
        callback();
      } else {
        if (this.couponForm.batchIds.length == 0) {
          callback(new Error("请选择考试批次"));
        } else {
          callback();
        }
      }
    };
    const timeValid = (rule, value, callback) => {
      if (
        this.couponForm.startTime == "" ||
        this.couponForm.finishTime == "" ||
        (this.couponForm.startTime == "" && this.couponForm.finishTime == "")
      ) {
        callback(new Error("请选择时间"));
      } else {
        callback();
      }
    };
    return {
      examineList: [],
      handleSelection: [],
      multipleSelection: [],
      examineData: [],
      disabled: false,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      batchData: [],
      Data: [],
      couponForm: {
        id: null,
        name: "",
        type: "1",
        coupon: "",
        threshold: false,
        fullAmount: null,
        num: "",
        batchType: "1",
        batchIds: [],
        startTime: "",
        finishTime: "",
        auditUserIds: [],
      },
      couponRules: {
        auditUserIds: [
          {
            required: true,
            message: "请选择审核人",
            validator: validateExamine,
          },
        ],
        name: [
          {
            required: true,
            message: "请输入优惠券名称",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择优惠券类型",
            trigger: "change",
          },
        ],
        coupon: [
          {
            required: true,
            message: "请输入满减金额或折扣数",
            trigger: "blur",
          },
        ],
        threshold: [
          {
            required: true,
            message: "请选择使用条件",
            trigger: "change",
          },
        ],
        fullAmount: [
          {
            required: true,
            message: "请输入门槛金额",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: "请输入发行量",
            trigger: "blur",
          },
        ],
        batchType: [
          {
            required: true,
            validator: batchVlid,
          },
        ],
        time: [
          {
            required: true,
            validator: timeValid,
          },
        ],
      },
      // 控制表单的显示与隐藏
      switchShow: [
        {
          value: true,
          label: "批次名称",
          stage: "batchName",
        },
        {
          value: true,
          label: "考试名称",
          stage: "examinationName",
        },
        {
          value: true,
          label: "使用区域",
          stage: "areaName",
        },
        {
          value: true,
          label: "上架状态",
          stage: "openState",
        },
        {
          value: true,
          label: "报名开始时间",
          stage: "enrollStart",
          width: 120,
        },
        {
          value: true,
          label: "报名结束时间",
          stage: "enrollEnd",
          width: 120,
        },
        {
          value: true,
          label: "预计考试开始时间",
          stage: "examinationStart",
          width: 130,
        },
        {
          value: true,
          label: "预计考试结束时间",
          stage: "examinationEnd",
          width: 130,
        },
        {
          value: true,
          label: "终端缴费金额",
          stage: "terminalPrice",
          width: 100,
        },
        {
          value: true,
          label: "同行缴费金额",
          stage: "peersPrice",
          width: 120,
        },
        {
          value: true,
          label: "VIP客户缴费金额",
          stage: "memberPrice",
          width: 120,
        },
        {
          value: true,
          label: "是否允许个人报名",
          stage: "statusAllow",
          width: 130,
        },
        {
          value: true,
          label: "是否允许补考",
          stage: "makeUp",
          width: 100,
        },
        {
          value: true,
          label: "负责人",
          stage: "userName",
        },
        {
          value: true,
          label: "更新时间",
          stage: "updateTime",
        },
        {
          value: true,
          label: "创建人",
          stage: "createBy",
        },
        {
          value: true,
          label: "创建时间",
          stage: "createTime",
        },
      ],
    };
  },
  created() {
    this.getBatchList();
  },
  methods: {
    // 表格前多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 1) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    // 审核人确定
    examineSubmit() {
      this.couponForm.auditUserIds.push(this.multipleSelection[0].userId);
      this.examineList.push(this.multipleSelection[0]);
      this.dialog.examineShow = false;
      this.multipleSelection = [];
    },
    // 添加审核人员
    onAdd() {
      console.log(1);
      this.dialog.examineShow = true;
      this.getNoRepeatPersonLiable();
    },
    // 获取审核
    getNoRepeatPersonLiable() {
      getNoRepeatPersonLiable(this.couponForm.auditUserIds).then((res) => {
        this.examineData = res.data;
      });
    },

    // 优惠券类型修改
    typeChange() {
      if (this.couponForm.type == 1) {
        this.couponForm.coupon = "";
      } else if (this.couponForm.type == 2) {
        this.couponForm.coupon = 1;
      }
    },
    // 删除
    batchDel(row) {
      this.batchData = this.batchData.filter((item) => item.id !== row.id);
      this.handleSelection = this.batchData;
      this.couponForm.batchIds = [];
      this.batchData.forEach((item) => {
        this.couponForm.batchIds.push(item.id);
      });
    },
    // 添加考试
    addCoupon() {
      console.log(1);
      this.dialog.batchShowEject = true;
      this.$nextTick(() => {
        this.dialog.batchShow = true;
        this.getBatchList();
      });
    },
    // 关闭
    couponClose() {
      this.dialog.couponShowEject = false;
    },
    onSubmit() {
      this.batchData = this.handleSelection;
      this.couponForm.batchIds = [];
      this.batchData.forEach((item) => {
        this.couponForm.batchIds.push(item.id);
      });
      this.dialog.batchShow = false;
    },
    // 提交审核
    submit() {
      this.$refs["couponForm"].validate((valid) => {
        if (!valid) return;
        couponEdit(this.couponForm).then((res) => {
          this.$message.success(res.msg);
          this.$parent.getList();
          this.dialog.couponShow = false;
        });
      });
    },
    dataChange(val) {
      this.handleSelection = val;
    },
    // 获取所有批次
    async getBatchList() {
      let res = await shelfList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      });
      this.Data = res.rows;
      this.total = res.total;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.basics {
  position: relative;
  font-size: 14px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.addCoupon {
  color: #1267fa;
}
/deep/ .couponClass {
  .el-dialog__body {
    height: 720px;
    overflow: auto;
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.approve {
  display: flex;
  flex-wrap: wrap;
}
.examine {
  display: flex;
  margin-right: 20px;
  padding: 0 5px;
  .examine-qd {
    display: flex;
    flex-direction: column;
    align-items: center;
    .circle-img {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 40px;
      }
    }
    .circle {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background-color: #1267fa;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .circleIcon {
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
</style>